<template>
  <div class="extractor">
    <h1>短视频文案提取</h1>
    <div class="input-container">
      <el-input
        v-model="videoUrl"
        placeholder="请输入抖音分享链接"
        :disabled="loading"
      >
        <template #append>
          <el-button
            type="primary"
            @click="extractText"
            :loading="loading"
          >
            提取文案
          </el-button>
        </template>
      </el-input>
    </div>

    <div v-if="result" class="result-container">
      <h3>提取结果：</h3>
      <el-card class="result-card">
        <div class="text-content">{{ result }}</div>
        <el-button
          type="primary"
          size="small"
          @click="copyText"
          class="copy-btn"
        >
          复制文本
        </el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'VideoExtractor',
  data() {
    return {
      videoUrl: '',
      result: '',
      loading: false
    };
  },
  methods: {
    async extractText() {
      if (!this.videoUrl) {
        ElMessage.warning('请输入视频链接');
        return;
      }

      this.loading = true;
      try {
        const response = await axios.post('http://localhost:3000/api/extract', {
          url: this.videoUrl
        });
        this.result = response.data.text;
      } catch (error) {
        ElMessage.error(error.response?.data?.error || '提取失败');
      } finally {
        this.loading = false;
      }
    },
    copyText() {
      navigator.clipboard.writeText(this.result)
        .then(() => ElMessage.success('复制成功'))
        .catch(() => ElMessage.error('复制失败'));
    }
  }
};
</script>

<style scoped>
.extractor {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.input-container {
  margin: 20px 0;
}

.result-container {
  margin-top: 30px;
}

.result-card {
  margin-top: 10px;
}

.text-content {
  white-space: pre-wrap;
  margin-bottom: 15px;
}

.copy-btn {
  margin-top: 10px;
}
</style>